<template>
  <div class="app-container addProjectApp">
      <div class="type">
          <el-breadcrumb separator-class="el-icon-arrow-right">
                <!-- <el-breadcrumb-item :to="{path:'/entry',name:'entry',params:{courseId:courseId}, query:{anchor:anchor,type:1}}">课程建设</el-breadcrumb-item> -->
                <el-breadcrumb-item :to="{path:'/mobile/bannerList'}" style="font-size: 16px;color: #262626;">移动端管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path:'/mobile/bannerList'}" style="font-size: 12px;color: #777777 !important;line-height:52px">首页Banner配置</el-breadcrumb-item>
                <el-breadcrumb-item style="font-size: 12px;color: #777777 !important;line-height:52px">{{id==0?'新建Banner':'编辑Banner'}}</el-breadcrumb-item>
            </el-breadcrumb>
       </div>
       <div class="header">
            <div class="nav">
                <div class="navList clearfloat">
                  <h4 class="h5">展示时间段</h4>
                  <el-date-picker
                    class="input dateShop"
                    @change="changeDate"
                    v-model="shopDate"
                    type="datetimerange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                   </el-date-picker>
                   <div class="uploadFontFont">
                      <div class="xing">*</div>
                  </div>
                </div>
                <div class="navList clearfloat">
                  <h4 class="h5">展位标题</h4>
                  <el-input v-model="projectTitle" ref="projectTitleRef" class="input" placeholder="请输入标题，必填项，最多20个字" @blur="projectTitleChange"></el-input>
                  <div class="uploadFontFont">
                      <div class="xing">*</div>
                  </div>
                </div>
                <div class="navList clearfloat">
                  <h4 class="h5">展位排序值</h4>
                  <input v-model="projectPhone"  class="input el-input__inner input numberShop " ref="projectPhone" placeholder="可输入1~99的数字，数字越大展位排序越前，不可与其它展位的数值重复" @keydown="keydown" @keyup="proving1()" @blur="oninput1()" />

                  <div class="uploadFontFont">
                      <div class="xing">*</div>
                  </div>
                </div>
                <div class="navList clearfloat">
                  <h4 class="h5">展位图片</h4>
                  <div class="uploadDetail">
                    <Upload :limit='1' :height="426"  style="float:left;" @uploadHandler='uploadChange' :dataHome='fileHomePic'></Upload> 
                  </div>
                </div>
                <div class="navList clearfloat">
                  <h4 class="h5">展位跳转</h4>
                  <el-select v-model="projectName" class="input inputSelect" popper-class="projectNameSelect" placeholder="请选择跳转类型" @change="changeOption">
                        <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                  </el-select>
                  <el-select v-model="valueMoRen" class="inputSelectTwo" filterable placeholder="请选择" v-if="projectName==null">
                    <el-option
                      v-for="item in optionsMoRen"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>

                  <el-input v-model="valueLink"  placeholder="请输入链接地址" ref="valueLink" v-if="projectName==1" class="inputSelectTwo" @change="changeUrl"></el-input>

                  <el-select v-model="valueShop" class="inputSelectTwo" filterable placeholder="请选择商品" v-if="projectName==2">
                    <el-option
                      v-for="item in optionsShop"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                    </el-option>
                  </el-select>

                  <el-select v-model="valueProject" class="inputSelectTwo" filterable placeholder="请选择项目" v-if="projectName==3">
                    <el-option
                      v-for="item in optionsProject"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                  <div class="uploadFontFont">
                      <div class="xing">*</div>
                  </div>
                </div>
            </div>
            <div class="sumitAdd clearfloat">
              <div class="sumitBtn setData" @click="addProjectData">提交</div>
              <div class="sumitBtn" @click="sumitBtnFalse">取消</div>
            </div>
       </div>
       <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="370px"
      >
        <span>是否确认离开，已填写的内容将被清空不做保留</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="sureBtn()">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import api from "@/fetch/url";
import {FormatDate} from '@/utils/index.js'
import Upload from '@/components/upload';
import Tinymce from '@/components/Tinymce'
// import MarkdownEditor from '@/components/MarkdownEditor/index.vue'
export default {
  components: { Tinymce,Upload },
  // components: { MarkdownEditor },
  data() {
    return {
      yueyangFalg:false,
      showTimeEnd:"",
      showTimeBegin:"",
      dialogVisible:false,
      content:"",
      content2:"",
       shopDate:[],
       projectName:null,
       projectTitle:"",
       projectDetail:"",
       projectPhone:"",
       playDetail:"",
       checkListBase:[],
       checkListBaseList:[],
       checkListBase2:[],
       checkListEat:[],
       checkListPlay:[],
       options: [{
            name:"外部链接",id:1
         },{
           name:"商品",id:2
         },{
           name:"项目",id:3
       }],
       optionsMoRen:[],  //默认显示空select
       valueMoRen: '',//默认显示空select的值
       valueLink:"",  //外部链接 对应的输入框的值
       optionsShop:[], //商品 对应的选中框
       valueShop:"",//商品 对应的选中框的值
       optionsProject:[], //项目 对应的选中框
       valueProject:"",//项目 对应的选中框的值

       id:this.$route.params.id,
       //新建商品需要传给后台字段
        "jumpType": 0,  //展位类型
        "jumpVal": "string",  //链接
        "pic": {  //展位图片
          "bucket": "string",
          "fileKey": "string",
          "name": "string"
        },
        "showTimeBegin": "2020-02-27T07:08:57.682Z", //开始时间
        "showTimeEnd": "2020-02-27T07:08:57.682Z",   //结束时间
        "sort": 0,   //排序值
        "title": "string",  //标题
        fileHomePic:{},
        posi:this.$route.query.posi,
    }
  },
  created() {
       api.goodsPage({
            pageNo:0,
            shelfStatus:1,
            pageSize:10000
         }).then(json => {
            if(json){ //所有商品
               this.optionsShop=json.list;
               api.projectPage({
                  pageNo:0,
                  operStatus:1,
                  pageSize:10000
              }).then(json => {
                  if(json){ //所有项目
                    this.optionsProject=json.list;
                        if(this.id!=0){  //编辑
                              //bannerDetail
                              api.bannerDetail({

                              },this.id,{
                                headers: {
                                    'Content-Type': 'application/json;charset=UTF-8'
                                }
                              }).then(json => {
                                if(json){
                                  // showTimeBegin: this.showTimeBegin,
                                  // showTimeEnd:this.showTimeEnd,
                                  // jumpVal:this.jumpVal,
                                  // jumpType:this.jumpType,
                                  // sort:this.projectPhone,
                                  // title:this.projectTitle,
                                  // pic:this.fileHomePic
                                  this.projectTitle=json.title;
                                  this.fileHomePic=json.attachDetail;
                                  this.projectPhone=json.sort;
                                  this.showTimeBegin=new Date(json.showTimeBegin);
                                  this.showTimeEnd=new Date(json.showTimeEnd);
                                  this.shopDate=[];
                                  this.shopDate.push(this.showTimeBegin);
                                  this.shopDate.push(this.showTimeEnd);
                                  // console.log(this.shopDate,8989);
                                  //类型
                                  // this.jumpVal=json.jumpVal;
                                  this.jumpType=json.jumpType;
                                  this.projectName=this.jumpType;
                                  this.changeOption("yueyang");
                                  // console.log(json.jumpVal);
                                  switch(this.jumpType){
                                    case 1:
                                        this.valueLink=json.jumpVal;  //链接
                                      break;
                                    case 2:
                                      // this.valueShop=json.jumpVal;//商品id
                                      for(let i in this.optionsShop){
                                          if(this.optionsShop[i].id==json.jumpVal){
                                                this.valueShop=this.optionsShop[i].title;
                                          }
                                      }
                                      break;
                                    case 3:
                                      // this.valueProject=json.jumpVal; //项目id
                                      for(let i in this.optionsProject){
                                          if(this.optionsProject[i].id==json.jumpVal){
                                                this.valueProject=this.optionsProject[i].name;
                                          }
                                      }
                                      break;
                                  }
                                }
                              })
                          }
                  }else {//不存在
                      this.$message({
                        message: json.message,
                        type: "error",
                      });
                  }
                })
             }else {//不存在
                this.$message({
                  message: json.message,
                  type: "error",
                });
             }
          })

  
  },
  computed: {
    language() {
      return this.languageTypeList['en']
    }
  },
　mounted() {
     if(this.id==0){
         document.title = "新建Banner - 阅阳旅居";
      }else {
          document.title = "编辑Banner - 阅阳旅居";
      }
    
},
methods: {
  //日期改变触发
  changeDate(val){
    let shopDate=val;
    if(shopDate[0]-shopDate[1]>0){
          this.showTimeBegin = FormatDate(new Date(Number(shopDate[1])),'yyyy-MM-dd hh:mm:ss'); //开始日期
          this.showTimeEnd = FormatDate(new Date(Number(shopDate[0])),'yyyy-MM-dd hh:mm:ss');  //结束日期
    }else {
        this.showTimeBegin = FormatDate(new Date(Number(shopDate[0])),'yyyy-MM-dd hh:mm:ss'); //开始日期
        this.showTimeEnd = FormatDate(new Date(Number(shopDate[1])),'yyyy-MM-dd hh:mm:ss');  //结束日期
    }
    //availableBanner
      api.availableBanner({
        showTimeBegin:this.showTimeBegin,
        showTimeEnd:this.showTimeEnd,
        excludeBannerId:this.id
      }).then(json => {
        if(json){ //该时间段存在空余展位
            console.log(json);
          }else {//不存在
            //  /本时段内已有5个展位，请更改展示时间，或者调整其它展位
            this.$message({
              message: "本时段内已有5个展位，请更改展示时间，或者调整其它展位",
              type: "error",
            });
          }
      })
  },
  //changeOption 选择展位触发
  changeOption(val){
     if(val=="yueyang"){  //编辑
          this.yueyangFalg=true;
     }else {
          this.yueyangFalg=false;
     }
    let item=this.projectName;
     switch(item-0){
       case 1:  //外部链接

         break;
       case 2:  //商品
            //goodsPage

         break;
       case 3:  //项目

         break;
     }
  },
  changeUrl(){
    //	^(http|https|ftp)\://([a-zA-Z0-9\.\-]+(\:[a-zA-Z0-9\.&%\$\-]+)*@)?((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9])|([a-zA-Z0-9\-]+\.)*[a-zA-Z0-9\-]+\.[a-zA-Z]{2,4})(\:[0-9]+)?(/[^/][a-zA-Z0-9\.\,\?\'\\/\+&%\$#\=~_\-@]*)*$
    		if(this.valueLink!=''){
					if(!(/(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(this.valueLink))) {
						this.projectPhone="";
            this.$message({
                  message: "请输入正确的链接格式如：http://www.aaa.com",
                  type: "error",
              });
						this.$refs.valueLink.focus();
					}
				}
  },
  sumitBtnFalse(){
    this.dialogVisible=true;
  },
  //点击弹框中的确定按钮
  sureBtn(){
      this.$router.push({
        path:'/mobile/bannerList',
        name:'bannerList',
      })
  },
  uploadChange(fileInfo,type){
   if(type == 1){//项目主图
        this.fileHomePic = fileInfo;
    }else if(type == -1){
        this.fileHomePic.splice(fileInfo,1);
    }else{//项目图片
        this.fileHomePic.push(fileInfo);
    }
  },
    //点击提交按钮
    addProjectData(){
        //提交时的校验
        if(this.sumitCheck() ==false){
          return false;
        }
        // let shopDate=[];
        // for(let i in this.shopDate){
        //     var r = /^\+?[1-9][0-9]*$/;　　//正整数
        //     if(r.test(this.shopDate[i])){
        //       shopDate.push(this.shopDate[i]);
        //     }else {  //
        //       shopDate.push(this.shopDate[i].getTime());
        //     }
        // }
        // if(shopDate[0]-shopDate[1]>0){
        //       this.showTimeBegin = FormatDate(new Date(Number(shopDate[1])),'yyyy-MM-dd hh:mm:ss'); //开始日期
        //       this.showTimeEnd = FormatDate(new Date(Number(shopDate[0])),'yyyy-MM-dd hh:mm:ss');  //结束日期
        // }else {
        //     this.showTimeBegin = FormatDate(new Date(Number(shopDate[0])),'yyyy-MM-dd hh:mm:ss'); //开始日期
        //     this.showTimeEnd = FormatDate(new Date(Number(shopDate[1])),'yyyy-MM-dd hh:mm:ss');  //结束日期
        // }
        console.log(this.showTimeBegin,this.showTimeEnd,999999999);
        this.jumpType=this.projectName;
        
        // console.log(this.jumpType,888);
        switch(this.jumpType){
           case 1:
               this.jumpVal=this.valueLink;  //链接
             break;
           case 2:
             this.jumpVal=this.valueShop+"";//商品id
             break;
           case 3:
             this.jumpVal=this.valueProject+""; //项目id
             break;
        }
 
        if(this.id==0){  //新建
            //bannerAdd 新建banner接口
            api.bannerAdd({
              showTimeBegin: this.showTimeBegin,
              showTimeEnd:this.showTimeEnd,
              jumpVal:this.jumpVal,
              jumpType:this.jumpType,
              sort:this.projectPhone,
              title:this.projectTitle,
              pic:this.fileHomePic
            },{
              headers: {
                  'Content-Type': 'application/json;charset=UTF-8'
              }
            }).then(json => {
                this.$message({
                  message: "新建Banner成功",
                  type: "success",
                });
                setTimeout(()=>{
                    this.$router.push({
                      path:'/mobile/bannerList',
                      name:'bannerList',
                    })
                },1000)
            });
        }else {  //编辑
              // showTimeBegin: this.showTimeBegin,
              // showTimeEnd:this.showTimeEnd,
              // jumpVal:this.jumpVal,
              // jumpType:this.jumpType,
              // sort:this.projectPhone,
              // title:this.projectTitle,
              // pic:this.fileHomePic
              if(this.yueyangFalg){ //没有选择  只是走了编辑
                   switch(this.jumpType){
                      case 2:
                      // this.valueShop=json.jumpVal;//商品id
                      for(let i in this.optionsShop){
                          if(this.optionsShop[i].title==this.valueShop){
                                this.jumpVal=this.optionsShop[i].id+"";
                          }
                      }
                      break;
                    case 3:
                      // this.valueProject=json.jumpVal; //项目id
                      for(let i in this.optionsProject){
                          if(this.optionsProject[i].name==this.valueProject){
                                this.jumpVal=this.optionsProject[i].id+"";
                          }
                      }
                      break;
                    }
              }
              // console.log(this.showTimeBegin,this.showTimeEnd,this.jumpType,this.jumpVal,this.projectPhone,this.projectTitle,this.fileHomePic,9999999);
              api.bannerEdit({
                showTimeBegin: this.showTimeBegin,
                showTimeEnd:this.showTimeEnd,
                jumpVal:this.jumpVal,
                jumpType:this.jumpType,
                sort:this.projectPhone,
                title:this.projectTitle,
                pic:this.fileHomePic,
                id:this.id
              },{
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                }
              }).then(json => {
                  this.$message({
                    message: "编辑Banner成功",
                    type: "success",
                  });
                  setTimeout(()=>{
                       this.$router.push({
                          path:'/mobile/bannerList',
                          name:'bannerList',
                        })
                  },1000)
              });
        }
  
      },
      //校验
      sumitCheck(){
        // 展示时间段this.shopDate
            if(this.shopDate==null||this.shopDate.length==0){
              this.$message({
                    message: "展示时间段不能为空",
                    type: "error",
                });
                return false;
            }
              //projectTitle 展位标题
            if(this.projectTitle==""){
              this.$message({
                    message: "展位标题不能为空",
                    type: "error",
                });
                return false;
            }
            //projectPhone 展位排序值
            if(this.projectPhone==0){
              this.$message({
                    message: "展位排序值不能为空",
                    type: "error",
                });
                return false;
            }
            //商品图片  this.fileHomePic
            // console.log(this.fileHomePic.name,999);
            if(this.fileHomePic.name==null){
              this.$message({
                    message: "展位图片不能为空",
                    type: "error",
                });
                return false;
            }
             //projectName  展位跳转
          if(this.projectName==null){
              this.$message({
                    message: "请选择展位跳转",
                    type: "error",
                });
                return false;
            }
            switch(this.projectName){
              case 1:
                  // this.jumpVal=this.valueLink;  //链接
                  if(this.valueLink==""){
                      this.$message({
                          message: "链接地址不能为空",
                          type: "error",
                      });
                      return false;
                  }
                break;
              case 2:
                // this.jumpVal=this.valueShop+"";//商品id
                 if(this.valueShop==""){
                      this.$message({
                          message: "请选择商品",
                          type: "error",
                      });
                      return false;
                  }
                break;
              case 3:
                // this.jumpVal=this.valueProject+""; //项目id
                 if(this.valueProject==""){
                      this.$message({
                          message: "请选择项目",
                          type: "error",
                      });
                      return false;
                  }
                break;
            }

      },
      //展位标题最多20个字
      projectTitleChange(){
          if(this.projectTitle.length-20>0){
              this.$message({
                  message: "展位标题需输入1~20个字",
                  type: "error",
              });
              this.$refs.projectTitleRef.focus();
          }
      },
      //商品副标题20-150
      projectDetailChange(){
          if(this.projectDetail.length-20<0||this.projectDetail.length-150>0){
              this.$message({
                  message: "商品副标题必须20~150个字",
                  type: "error",
              });
              this.$refs.projectDetailRef.focus();
          }
      },
      
      //MarkdownEditor获取编辑器的html
      // getHtml() {
      //   this.html = this.$refs.markdownEditor.getHtml()
      //   console.log(this.html,123456)
      // },
      keydown(event) {
        if (event.shiftKey || event.key == "Process") {
          event.returnValue = false;
          return false;
        }
        if (
          !(event.keyCode == 46) &&
          !(event.keyCode == 8) &&
          !(event.keyCode == 37) &&
          !(event.keyCode == 39) &&
          !(event.keyCode == 110) &&
          !(event.keyCode == 190)
        ) {
          if (
            !(
              (event.keyCode >= 48 && event.keyCode <= 57) ||
              (event.keyCode >= 96 && event.keyCode <= 105)
            )
          ) {
            event.returnValue = false;
          }
        }
      },
      proving1() {
        let score = (this.projectPhone || "").toString();
        let value = score.match(/^\d*(\.?\d{0,1})/g)[0] || "";
        if (value == ".") {
          value = "";
        }
        if(value.indexOf(".")!=-1){
          value = value.substr(0, value.indexOf("."));
        }
        if(value==0){  //大于99
           value="";
        }
        if(value-100>=0){  //大于99
           value=99+"";
        }
        this.projectPhone = value;
      },
      oninput1() {
        let score = (this.projectPhone || "").toString();
        let value = score.match(/^\d*(\.?\d{0,1})/g)[0] || "";
        if(value.indexOf(".")!=-1){
          value = value.substr(0, value.indexOf("."));
        }
        
        if (value == ".") {
          value = "";
        }
        if(value==0){  //大于99
           value="";
        }
        if(value-100>=0){  //大于99
           value=99+"";
        }
        this.projectPhone = value;
        //availableSort  判断排序值是否重复
         api.availableSort({
            sort:this.projectPhone-0
         }).then(json => {
            if(json){ //该时间段存在空余展位
               console.log(json);
             }else {//不存在
                //  /此数值与其它展位重复，请更改
                this.$message({
                  message: "此数值与其它展位重复，请更改",
                  type: "error",
                });
             }
          })
      },
    }
  }
</script>
<style lang="scss">
.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
  background-color: #fff;
}

.textareaShop .el-textarea__inner{ 
  resize: none;
  height: 100px;
}
.textarea .el-textarea__inner{ 
  resize: none;
  height: 150px;
}
.mce-menubar .mce-menubtn  {
  display: none;
}
.projectNameSelect .el-select-dropdown__item {
   overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.app-container .el-form-item.is-success .el-input__inner,.app-container  .el-form-item.is-success .el-textarea__inner{
  border: 1px solid #DDDDDD !important;
  background-color: #fff !important;
  background: #fff !important;
}
.app-container .el-form-item.is-success .el-input__inner:focus,.app-container .el-form-item.is-success .el-textarea__inner:focus,.app-container .el-input.is-active .el-input__inner,.app-container .el-input__inner:focus {
  border: 1px solid #FF6A00 !important;
  border-color:#FF6A00 !important;
      background-color: #fff !important;
    background: #fff !important;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color:#FC612A !important;
  border-color:#FC612A !important;
}
.el-checkbox__input.is-checked+.el-checkbox__label,.el-textarea__inner:focus,.el-textarea__inner:focus {
  color:#FC612A !important;
}
.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset {
      vertical-align: bottom !important;
}
.addProjectApp {
  .el-breadcrumb{
    hieght:52px;
    line-height:52px;
  }
}
</style>
<style lang="scss" scoped>
  .app-container {
    padding:16px 24px 35px;
  }
    .addProjectApp {
     .type {
         padding:0px 30px 10px 0px;border-bottom:1px solid #E5E7EB;height:52px;line-height:52px;
     }
  }
  .header {
       width: 100%;
      border-radius:4px;
      background: #fff;
      // padding:0px 20px;
      box-sizing: border-box;
      .parts {
         padding:20px;
         box-sizing: border-box;
         background: #f2f2f2;
         margin-top:30px;
         font-weight: 700;
      }
      .partsSec {
        margin-top:0px;
      }
      .nav {
        padding:10px 20px;
        box-sizing: border-box;
      }
      .navList {
          padding:10px 0;
          box-sizing: border-box;
          .h5,.input,.numberP {
            float: left;
          }
          .h5 {
            width:100px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #262626;
            font-weight:normal;
            img {
              width:14px;
              margin-top:13px;
              margin-right:5px;
            }
            span {
              font-size: 14px;
              color: #262626;
            }
          }
          .input {
            width:80%;
          }
          .inputSelect{
            float: left;
            width:20%;
            margin-right:10px;
          }
          .inputSelectTwo{
            float: left;
            width:calc(60% - 10px);
          }
          .dateShop {
            width:60%;
          }
          .numberP {
            line-height: 40px;
            margin-left:10px;
            font-weight: 700;
          }
          // .numberShop {
          //   width:40%;
          // }
          .uploadDetail {
            float: left;
             .upload {
               width:150px;
               height: 115px;
               border: 1px solid #DCDFE6;
               border-radius: 4px;
               text-align: center;
               line-height: 115px;
               color: #ccc;
               cursor: pointer;
             }
             p {
               margin-top:20px;
               color: #ccc;
               font-size:14px;
             }
          }
          .checkDetail {
            float: left;
            width:80%;
            background: #F7F7F9;
            border-radius: 2px;
            padding:8px 20px 20px;
            box-sizing: border-box;
            .checkListAll {
              margin-top:20px;
              span {
                float: left;
                font-size: 14px;
                color: #262626;
              }
              .checkList {
                float: left;
                margin-left:20px;
              }
            }
            .checkListAll:first-child{
                 margin-top:12px;
            }
          }
      }
  }
    .sumitAdd {
    padding:50px 50px 30px 0;
    box-sizing: border-box;
    .sumitBtn {
      float: left;
      width:180px;
      height: 50px;
      border:1px solid #DCDFE6;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      text-align: center;
      line-height: 50px;
      margin-left:30px;
      cursor: pointer;
    }
    .setData {
      background: #FC612A;
      color: #fff;
      border:1px solid #FC612A;
      margin-left:360px;
    }
  }
  .uploadFontFont {
    float: left;
    height:40px;
    margin-left:10px;
    position: relative;
    p {
       font-size: 12px;
       color: #A9A9A9;
    }
    .xing {
      position: absolute;
      left:0;
      top:0;
      font-size: 16px;
      color: #F52D2D;
    }
  }
</style>